import React from 'react';
import {Route, Link} from 'react-router-dom'

const Products = ({match}) => (
  <div>
    <h2>Products</h2>
    <ul>
      <li><Link to={`${match.url}/phone`}>手机</Link></li>
      <li><Link to={`${match.url}/computer`}>电脑</Link></li>
    </ul>
    <hr/>
    <Route path={`${match.url}/phone`} component={Phone}/>
    <Route path={`${match.url}/computer`} component={Computer}/>
  </div>
);

const Phone = () => (
  <div>
    <h2>手机列表</h2>
    <ul>
      <li>小米6</li>
      <li>iPhone</li>
      <li>华为</li>
    </ul>
  </div>
);

const Computer = () => (
  <div>
    <h2>电脑列表</h2>
    <ul>
      <li>Mac Pro</li>
      <li>小米 Pro</li>
      <li>联想</li>
    </ul>
  </div>
);

export default Products
